
<div class="wrapper wrapper-content animated fadeInRight">
    <div class="row">
        <div class="col-lg-9">
            <div class="tabs-container">
                <ul class="nav nav-tabs" id="tab-list-2">
                    <li class="links active" id="search-link"><a href="#search" role="tab" data-toggle="tab">Search</a></li>
                </ul>
                <div class="tab-content">
                   <div id="search" class="tab-pane active">
                        <div class="panel-body">
                              <form id="barcode_gen" class="form-horizontal">
                                  <div class="ibox-title" style="border:none;"><h5 style="color: #00afef"><i>Search</i></h5>
                                  </div>
                                     <div class="ibox-content">
                                          
                                          <div class="form-group">
                                              <label class="col-lg-4 control-label"> Serial Number: </label>
                                              <div class="col-lg-5">
                                                  <input type="text" name="gen_serial" id="" class="form-control">
                                              </div>
                                          </div>
                                           <div class="form-group">
                                              <label class="col-lg-4 control-label"></label>
                                              <div class="col-lg-5">
                                                <a href="" class="btn btn-w-m btn-info btn-md pull-right m-t-n-xs print-btn" id="print_bars"> Print</a>
                                                  <button id="barPrint" class="btn btn-primary btn-md pull-right m-t-n-xs barcode-btn btn-margin-right" > Generate</button>
                                              </div>
                                          </div>
                                      </div>
                                  </form>
                          
                                <div class="" id="bar_result" >
                                  <div class="ibox-content custom">
                                          <table class="table-bordered table-compact" style="width:30%;align:center;" align="center">
                                              <thead>
                                                  <tr>
                                                      <th style="padding:8px;">Barcode</th>
                                                      <!-- <th style="padding:8px;">Action</th> -->
                                                  </tr>
                                              </thead>
                                              <tbody  id ="bars" >
                                                  <tr>
                                                    <!-- <td id="" style="padding-top:0px;"><span></span></td> -->
                                                    <!-- <td id="bars-act"></td> -->
                                                  </tr>
                                              </tbody>


                                          </table>
                                  </div>
                                </div>
                              <table style="width:100%;align:center;" class="table-bordered table-compact" id="reports">
                                <thead>
                                  <tr><th></th></tr>
                                </thead>
                                <tbody id="">
                                  <tr >
                                      <td style="border:2px solid black;">
                                          <h5 style="text-align:center;margin-bottom:0px;">BARANGAY LUMBIA WATER SYSTEM</h5>
                                          <h6 style="text-align:center;margin-top:0px;">Barangay Lumbia, Cagayan de Oro City</h6>
                                        
                                        <h5 style="text-align:center;">D I S C O N N E C T I O N &nbsp; &nbsp; N O T I C E</h5>
                                        <h6 style="float:right;margin-right:50px;margin-top:0px;">Date:______________</h6>
                                        <h6 style="margin-left:50px;">Dear ________,</h6>
                                        <h6 style="margin-left:50px;margin-bottom:10px;">Greetings!</h6>
                                          <h6 style="margin-left:80px;margin-right:50px;margin-top:0px;margin-bottom:3px;">Your account is already in ARREARS and DUE FOR DISCONNECTION after the lapse of (5)days upon receiving the second bill.</h6>
                                          <h6 style="margin-left:80px;margin-right:50px;margin-top:0px;margin-bottom:10px;">To Avoid ADDITIONAL CHARGES and WATER DISCONNECTION please pay your bills at our office</h6>
                                      
                                          <h6 style="margin-left:50px;margin-top:0px;">NOTE : <i>Please Disregard this notice if payment has already been made. THANK YOU.</i></h6>
                                          <h6 style="margin-left:50px;margin-top:0px;">Received by:</h6>
                                          <h6 style="margin-left:50px;margin-top:0px;">Customer's Signature</h6>
                                    </td>
                                  </tr>
                                  <tr >
                                      <td style="border:2px solid black;">
                                          <h5 style="text-align:center;margin-bottom:0px;">BARANGAY LUMBIA WATER SYSTEM</h5>
                                          <h6 style="text-align:center;margin-top:0px;">Barangay Lumbia, Cagayan de Oro City</h6>
                                        
                                        <h5 style="text-align:center;">D I S C O N N E C T I O N &nbsp; &nbsp; N O T I C E</h5>
                                        <h6 style="float:right;margin-right:50px;margin-top:0px;">Date:______________</h6>
                                        <h6 style="margin-left:50px;">Dear ________,</h6>
                                        <h6 style="margin-left:50px;margin-bottom:10px;">Greetings!</h6>
                                          <h6 style="margin-left:80px;margin-right:50px;margin-top:0px;margin-bottom:3px;">Your account is already in ARREARS and DUE FOR DISCONNECTION after the lapse of (5)days upon receiving the second bill.</h6>
                                          <h6 style="margin-left:80px;margin-right:50px;margin-top:0px;margin-bottom:10px;">To Avoid ADDITIONAL CHARGES and WATER DISCONNECTION please pay your bills at our office</h6>
                                      
                                          <h6 style="margin-left:50px;margin-top:0px;">NOTE : <i>Please Disregard this notice if payment has already been made. THANK YOU.</i></h6>
                                          <h6 style="margin-left:50px;margin-top:0px;">Received by:</h6>
                                          <h6 style="margin-left:50px;margin-top:0px;">Customer's Signature</h6>
                                    </td>
                                  </tr>
                                </tbody>
                              </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div><!-- END of class row-->
</div>
 <script type="text/javascript">
  $(document).ready(function(){
    $('#reports').hide();
    $.ajax({
                        type: "POST",
                        url: "<?php echo base_url($this->session->userdata('forajax').'/remove_temp'); ?>",
                        dataType: 'json',
                    success: function(data){
                       
                      }
                    });
    
    $('#print_bars').click(function(){
      //$('#reports').print();

      // var divToPrint = document.getElementById('reports');
      // var htmlToPrint = '' +
      //     '<style type="text/css">' +
      //     'table th, table td {' +
      //     'border:1px solid #000;' +
      //     'padding;0.5em;' +
      //     '}' +
      //     '</style>';
      // htmlToPrint += divToPrint.outerHTML;
      // newWin = window.open("");
      // newWin.document.write(htmlToPrint);
      // newWin.print();
      // newWin.close();

      // printDivCSS = new String ('<link href="myprintstyle.css" rel="stylesheet" type="text/css">');
      //  window.frames["print_frame"].document.body.innerHTML=printDivCSS + document.getElementById('reports').innerHTML;
      //           window.frames["print_frame"].window.focus();
      //           window.frames["print_frame"].window.print();           

      var divToPrint=document.getElementById("reports");
       newWin= window.open("");
       newWin.document.write(divToPrint.outerHTML);
       newWin.print();
       newWin.close();
      });



    $('#barcode_gen').validate({
        rules:{
          gen_serial    : {
            required : true
          }
        },submitHandler: function(form){
                    $.ajax({
                        type: "POST",
                        url: "<?php echo base_url($this->session->userdata('forajax').'/gen_barcodes'); ?>",
                        data: $('#barcode_gen').serialize(),
                        dataType: 'json',
                    success: function(data){
                        console.log(data);
                        $('#bars').append('<tr><td style="padding-top:0px;"><img src="<?php echo base_url("assets/barcodes/temp"); ?>'+ '/' + data + '.png' + '" width="120" height="28" style="align:left; padding-top:3px" ></td></tr>');
                      }
                    });
                 }
      });
  });
 </script>